<template>
  <div class="Videomonitoring">
    <!-- 视频监控 -->
    <el-row style="width: 100%">
      <el-col :span="4" class="videtite" style="font-weight: bold">视频监控</el-col>
      <el-col :span="20" style="">
        <el-row style="width: 100%">
          <!-- <el-col :span="3"> -->
          <div style="padding: 5px 20px; display: flex; border-radius: 5px; border: 1px solid rgb(0 0 0 / 6.7%)">
            <el-button plain size="small">查询<el-icon color="#97bef8" size="size">
                <Search />
              </el-icon></el-button>
            <!-- </el-col> -->
            <!-- <el-col :span="8"
            > -->
            <div style="margin-left: 10px" class="params">
              <span>类型:</span>
              <el-select v-model="value" class="m-2" placeholder="全部" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <!-- </el-col> -->
            <!-- <el-col :span="8"
            > -->
            <div style="margin-left: 10px" class="params">
              <span>路名:</span>
              <el-input v-model="input" placeholder="" size="small" />
            </div>
          </div>
          <!-- </el-col> -->
        </el-row>
      </el-col>
    </el-row>
    <!-- 视频 -->
    <el-row style="margin-top: 20px">
      <el-col :span="10">
        <el-tabs :tab-position="tabPosition" style="height: 100%">
          <div v-for="item in 6" :key="item">
            <el-tab-pane :label="lablefromat(item)">
              <div v-for="item2 in 8" :key="item2">
                <el-button class="btn" style="width: 90%" plain size="small">视频路名{{ item2 }}</el-button>
              </div>
            </el-tab-pane>
          </div>

          <!-- <el-tab-pane label="视频类型2">配置管理</el-tab-pane>
          <el-tab-pane label="视频类型3">角色管理</el-tab-pane>
          <el-tab-pane label="视频类型4">定时任务补偿</el-tab-pane>
          <el-tab-pane label="视频类型5">定时任务补偿</el-tab-pane>
          <el-tab-pane label="视频类型6">定时任务补偿</el-tab-pane> -->
        </el-tabs>
      </el-col>
      <el-col :span="10">
        <el-image class="imageurl" :src="url" fit="fit"></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref("");
const input = ref("");
const tabPosition = ref("left");
const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const lablefromat = (value: any) => {
  return "视频类型" + value;
};
const options = [
  {
    value: "全部",
    label: "全部",
  },
];
</script>

<style lang="less" scoped>
.Videomonitoring {
  width: 100%;

  //   border: 1px solid #000;
  .videtite {
    display: flex;
    align-items: center;
  }
  .params {
    display: flex;
    align-items: center;
    span {
      margin-right: 5px;
      flex-shrink: 0;
    }
  }
  :deep(.el-tabs__item), .btn {
    height: 40px;
  }
}
.imageurl {
  width: 80%;
  height: 80%;
}
</style>